<template>
  <div class="plan-wrapper">
    <el-dialog
      title="选择发运计划"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      class="tableDialog"
      width="1000px  "
    >
      <div class="dialog-container">
        <div class="container">
          <section class="plan-search">
            <el-input placeholder="客户/供应商名称/业务编号" v-model="inputName" @input=" getList2 ($event,true)">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-table
              size="mini"
              v-loading="loading"
              :data="tableData"
              style="width: 100%; margin-top: 10px"
              border
              :header-cell-style="{
                'background-color': '#eeeeee !important',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{
                    (page.pageNo - 1) * page.pageSize + scope.$index + 1
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="发运期间"
                width="320"
                :show-overflow-tooltip="true"
              >
                <template slot-scope="scope" >
                  {{scope.row.sendStartDate}}-{{scope.row.sendEndDate}}
                </template>
              </el-table-column>
              <el-table-column
                prop="business.companyName"
                label="客户/供应商"
                min-width="200"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="product.name"
                label="货物"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="transQuantity"
                label="运量"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column
                prop="business.codes"
                label="业务编号"
                min-width="120"
                :show-overflow-tooltip="true"
              >
              </el-table-column>
              <el-table-column label="操作" width="75px">
                <template slot-scope="scope">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="selectRow(scope.row)"
                  >选择
                  </el-link
                  >
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="handleCurrentChange"
              :page-size="page.pageSize"
              :current-page="page.pageNo"
              layout="total,prev, pager, next"
              :total="page.total"
            >
            </el-pagination>
          </section>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getPlanList } from '@/api/transplan/transplan.js'
  export default {
    data () {
      return {
        tableData: [],
        loading: false,
        dialogVisible: false,
        inputName: '',
        data: [],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 20
        }
      }
    },
    methods: {
      handleCurrentChange (e) {
        this.page.pageNo = e
        this.getPlanList(this.page)
      },
      // 获取列表
      getPlanList (params) {
        getPlanList({
          pageSize: params.pageSize,
          pageNo: params.pageNo,
          state: 100
        }).then((res) => {
          if (res.data.code === '200') {
            this.tableData = res.data.result.list
            this.page.total = res.data.result.count
          }
        })
      },

      // 点击树获取列表和搜索获取列表
      getList2 ($event, isSearch) {
        if (isSearch) {
          getPlanList({names: $event}).then((res) => {
            if (res.data.code === '200') {
              this.tableData = res.data.result.list
              this.page.total = res.data.result.count
            }
          })
        }
      },

      tableRowClassName ({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row'
        } else {
          return 'success-row'
        }
      },
      // 选择行
      selectRow (row) {
        this.$emit('getTransPlanData', row)
        this.dialogVisible = false
      },

      handleClose (done) {
        done()
      },
      close () {
      },
      doSubmit () {
      }
    },
    mounted () {
      this.getPlanList(this.page)
    }
  }
</script>
<style scoped lang="scss">
  .dialog-container {
    width: 100%;
  }

  .container {
    width: 100%;
    /*height: 500px;*/
    display: flex;
  }
  .plan-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        .plan-search{
          width: 100%;
        }
        .plan-search>.el-input {
          width: 260px;
          height: 32px;

          input {
            width: 260px;
            height: 32px;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            color: #333333;
          }

          input:hover, input:focus {
            border-color: #1890ff;
          }

          .el-input__inner::-webkit-input-placeholder {
            color: #999999;
          }
          .el-textarea__inner::-webkit-input-placeholder {
            color: #999999;
          }
          .el-input__suffix-inner{
            .el-icon-search{
              line-height: 32px;
            }
          }
        }
      }
    }
  }
</style>
